<template>
  <div>
    <div class="mb-3">
      <el-button
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        type="primary"
        @click="edit()"
      >
        新增对外担保信息
      </el-button>
    </div>
    <loading-wrap>
      <el-table border :data="tableData">
        <el-table-column align="center" label="担保对象" prop="warrant_object">
          <template slot-scope="scope">
            <span>{{ scope.row.warrant_object || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="担保期限">
          <template slot-scope="scope">
            <span>{{ scope.row.warrant_period | pureUnit('年') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="担保额度">
          <template slot-scope="scope">
            <span>{{ scope.row.warrant_funds | pureUnit('万元') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="担保余额">
          <template slot-scope="scope">
            <span>{{ scope.row.warrant_left_funds | pureUnit('万元') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="customerData.project_status === '0' || customerData.project_status === '2'"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-tooltip content="修改" effect="dark" placement="bottom">
              <el-button style="font-size: 20px" type="text" @click="edit(scope.row)">
                <i class="fa fa-edit"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" effect="dark" placement="bottom">
              <el-button
                style="font-size: 20px; color: red"
                type="text"
                @click="deleteData(scope.row)"
              >
                <i class="fa fa-trash"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </loading-wrap>

    <form-component
      :auto-init="false"
      :form-data="formData"
      :formAppend="{ customer_id: 'customer_id' }"
      :table-data="editData"
      :table-id="tableId"
      :table-name="tableName"
      :visible.sync="editVisible"
      @success="getData"
    ></form-component>
  </div>
</template>
<script>
import FormComponent from '@/components/FormComponent'

export default {
  components: {
    FormComponent,
  },

  props: {},

  data() {
    return {
      tableData: [],
      editVisible: false,
      tableName: 'datum_customer_warrant_foreign',
      editData: {},
      tableId: '',
      formData: {
        warrant_object: { type: 'text', label: '担保对象', value: '' },
        warrant_period: { type: 'number', label: '担保期限', value: '', unit: '年', step: 1 },
        warrant_funds: { type: 'number', label: '担保额度', value: '', unit: '万元', step: 0.01 },
        warrant_left_funds: {
          type: 'number',
          label: '担保余额',
          value: '',
          unit: '万元',
          step: 0.01,
        },
        remark: { type: 'textarea', label: '备注', value: '' },
      },
    }
  },

  computed: {},

  watch: {},

  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },

  mounted() {},

  methods: {
    getData() {
      this.$api
        .getData('credit', this.tableName, {
          'customer_related_id.eq': this.id,
        })
        .then(res => {
          this.tableData = res.data
        })
    },
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.id : ''
      this.editData = p
    },
    deleteData(item) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('span', undefined, `确定删除该担保信息？`),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            const [res] = await this.$utils.promise(
              this.$api.deleteData('credit', this.tableName, item.id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
            if (res) {
              this.$message.success('删除成功！')
              this.getData()
              done()
            } else {
              this.$message.error('删除失败，请重试！')
            }
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style scoped></style>
